<template>
  <!-- 平滑单折线图 -->
  <div
    id="bloodPressureCharts"
    class="myChart"
  />
</template>

<script>
  import echarts from 'echarts';
  export default {
    name: 'Home',
    components: {},
    props: {
      configs: {
        type: Object,
        default: () => {
          return {};
        }
      },
      // 正常区域数据
      normalData: {
        type: Array,
        default: () => {
          return null;
        }
      },
    },
    data() {
      return {
        active: 0,
        myChart: ''
      };
    },
    created() {},
    mounted() {
      this.myChart = echarts.init(document.getElementById('bloodPressureCharts'));
      this.initMyChartData();
    },
    methods: {
      // 初始化echart 雷达图数据
      initMyChartData() {
        this.setEchartsOption(
          this.configs,
          this.normalData,
        );
      },
      setEchartsOption() {
        // 基于准备好的dom，初始化echarts实例
        // 绘制图表，this.echarts1_option是数据
        this.myChart.setOption({
          tooltip: {
            trigger: 'axis',
            axisPointer:{
              type: 'line', // 选中网格线的样式
              lineStyle:{
                type: 'dashed',
                width: '2',
                color: 'rgba(255,45,85,0.4)',
              }
            }
          },
          grid: {
            top: '10px',
            bottom: '50px',
            left: '41px',
            right: '21px'
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
              fontSize: 11,
              color: '#999999', // 改变x轴线和文本样式

            },
            axisLine:{
              show: false,
              lineStyle:{
                color:'#E0E0E0', // 改变X轴线样式
              }
            },
            splitLine:{
              show: false,
            },
            data: ['06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00']
          },
          yAxis: {
            type: 'value',
            min: 0,
            max: 175,
            axisLabel: {
              fontSize: 13,
              color: '#999', // 改变Y轴文本样式
            },
            axisLine:{
              lineStyle:{
                color:'#E0E0E0', // 改变Y轴线样式
              }
            },
            splitLine:{
              show: true, // Y轴网格线
              lineStyle: {
                type: 'solid',
                width: '1',
                color: '#E0E0E0' // 改变x轴网格线样式
              },
            },
            interval: 45
          },
          series: [
            {
              name:'心率',
              type:'line',
              symbolSize: 20,
              symbol: () => {
                return 'image://';
              },
              stack: 'lb',
              smooth: true,
              areaStyle: {
                normal: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                      offset: 0, color: '#FF2D55' // 0% 处的颜色
                    }, {
                      offset: 1, color: 'rgba(255,45,85,0.3)' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                  },
                  opacity: 0.4,
                  origin: 'auto'
                }
              },
              itemStyle : {
                normal : {
                  color:'#FF8510',
                  lineStyle:{
                    color:'#FF5E5E'
                  }
                }
              },
              data: [60, 80, 70, 90, 100, 80, 60, 60]
            },
          ]
        });
      }

    }
  };
</script>

<style scoped lang="scss">
.myChart {
  display: flex;
  width: 100%;
  height: 300px;
  margin: 0 auto;
  justify-items: center;
  align-items: center;
}
</style>
